<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢迎来到我的网站</title>
    <link rel="stylesheet" href="css/base.css" />
    <!-- 引入要使用的字体图标 -->
    <link rel="stylesheet" href="./css/font.css" />
    <link rel="stylesheet" href="./css/style-1.css" />
    <link rel="stylesheet" href="./css/style-2.css" />
    <link rel="stylesheet" href="./css/style-3.css" />
    <link rel="stylesheet" href="./css/style-4.css" />
    <link rel="stylesheet" href="./css/style-5.css" />
    <link rel="stylesheet" href="./css/fullpage.min.css" />
    <!-- *************************************** -->
    <script src="./js/jQuery.mini.js"></script>
    <script src="./js/fullpage.min.js"></script>
    <!-- 导入自己编写的js 使用jq中的插件 完成整屏滑动 -->
    <script src="./js/index.js"></script>
    <style>
      /* 调整第三屏 小圆点的位置以及颜色 */
      .fp-bottom ul {
        width: 100%;
        text-align: center;
      }

      .fp-bottom ul li a span {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="dowebok">
      <!-- 第一页 -->
      <div class="section sec1">
        <!-- 背景圆点 -->
        <div class="sec1_circle1"></div>
        <div class="sec1_circle2"></div>
        <div class="sec1_circle3"></div>
        <!-- 头部 -->
        <nav>
          <ul>
            <li class="local_home">
              <a href="#page1">
                <span class="local_hd">Home</span>
                <span class="local_bd">主页</span>
              </a>
            </li>
            <li class="local_home">
              <a href="#page2">
                <span class="local_hd">Person</span>
                <span class="local_bd">简介</span>
              </a>
            </li>
            <li class="local_home">
              <a href="#page3">
                <span class="local_hd">Photo</span>
                <span class="local_bd">照片集</span>
              </a>
            </li>
          </ul>
        </nav>
        <!-- 内容区域 -->
        <main>
          <!-- 左半边 -->
          <div class="main_left">
            <!-- 有current这个类 代表当前选中 背景颜色更改 -->
            <div class="myPhoto current">
              <a href="#">
                <img src="./img/aRbly.jpg" alt="" />
                <h3>Mr'Chen</h3>
                <p>有十连不要垫池子</p>
              </a>
            </div>
            <div>
              <a href="#">
                <!-- 用p标签做前面的正方形框框 -->
                <p></p>
                <span>首页</span>
              </a>
            </div>
            <div>
              <a href="#">
                <p></p>
                <span>关于</span>
              </a>
            </div>
            <div>
              <a href="#">
                <p></p>
                <span>电话</span>
              </a>
            </div>
            <div>
              <a href="#">
                <p></p>
                <span>邮箱</span>
              </a>
            </div>
            <div>
              <a href="#">
                <p></p>
                <span>微信</span>
              </a>
            </div>
            <div>
              <a href="#">
                <p></p>
                <span>更多</span>
              </a>
            </div>
          </div>
          <!-- 右半边 -->
          <div class="main_right">
            <div class="content hidden" style="display: block">
              <img src="./img/aRbly.jpg" alt="aRbly.jpg" />
              <p>总有地上的生灵，敢于面对雷霆的威光</p>
              <p>我的名字是枫原万叶，游历四方的浪人</p>
              <p>启程吧，属于我们的旅途也要开始了</p>
			  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;————枫原万叶</p>
            </div>

            <div class="content hidden">
              <img src="./img/3-6.jpg" alt="1-1.jpg" />
              <p>欢迎来到我的网站</p>
              <p>欢迎来到钟离主页</p>
            </div>

            <div class="content hidden">
              <img src="./img/3-9.jpg" alt="1-2.jpg" />
              <p>学历：臭中专</p>
              <p>技能：吃饭睡觉打豆豆</p>
            </div>

            <div class="content hidden">
              <img src="./img/3-7.jpg" alt="1-3.jpg" />
              <p>电话：13048810524</p>
              <p>有空帮我充50元话费</p>
            </div>

            <div class="content hidden">
              <img src="./img/1-4.jpg" alt="1-1.jpg" />
              <p>邮箱：3167758251@qq.com</p>
              <p>半辈子不用邮箱</p>
            </div>

            <div class="content hidden">
              <img src="./img/1-5.jpg" alt="1-5.jpg" />
              <p>微信：OTBEFGIQ</p>
              <p>每周四记得v我50</p>
            </div>

            <div class="content hidden">
              <img src="./img/1-6.jpg" alt="1-6.jpg" />
              <p>到达世界最高层</p>
              <p>理塘~</p>
            </div>
          </div>
        </main>
      </div>
      <!-- 第二页 -->
      <div class="section sec2">
        <!-- 背景小圆点 -->
        <div class="sec2_circle1"></div>
        <div class="sec2_circle2"></div>
        <div class="sec2_circle3"></div>
        <!-- 主体内容 -->
        <div class="sec2_main">
          <div class="sec2_main_head">
            <ul>
              <li class="current1"><a href="#">个人资料</a></li>
              <!-- <li><a href="#">个人图片</a></li> -->
             <!-- <li><a href="#">个人技能</a></li> -->
              <li><a href="#">个人QQ</a></li>
              <li><a href="#">个人微信</a></li>
              <!-- <li><a href="#">其他信息</a></li> -->
            </ul>
          </div>
          <div class="sec2_main_body">
            <!-- 个人简介部分 -->
            <div class="sec2_content hidden" style="display: block">
              <div class="content_left">
                <p></p>
                <p>姓名：陈浩田</p>
                <p>性别：男</p>
                <p>生日: 2004-09-09</p>
                <p>爱好: 打游戏</p>
                <p>星座: 处女座</p>
                <p>别在雨中沉思</p>
                <p>别在树下徘徊</p>
                <p>🎈🎈🎈</p>
              </div>
              <div class="content_right">
                <img src="./img/2-1.jpg" alt="" />
              </div>
            </div>
            <!-- 个人QQ -->
            <div class="sec2_content hidden">
              <div class="content_left">
                <p></p>
                <p>QQ号: 3167758251</p>
                <p></p>
              </div>
              <div class="content_right">
                <img src="./img/2-4.jpg" alt="" />
              </div>
            </div>
            <!-- 个人微信 -->
            <div class="sec2_content hidden">
              <div class="content_left">
                <p></p>
                <p>微信号: OTBEFGIQ</p>
                <p></p>
              </div>
              <div class="content_right">
                <img src="./img/2-5.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第三页 -->
      <div class="section sec3">
        <div class="slide">
          <img src="img/3-1.jpg" alt="" />
        </div>
        <div class="slide">
          <img src="img/3-2.jpg" alt="" />
        </div>
        <div class="slide">
          <img src="img/3-3.jpg" alt="" />
        </div>
        <div class="slide">
          <img src="img/3-4.jpg" alt="" />
        </div>
        <div class="slide">
          <img src="img/3-5.jpg" alt="" />
        </div>
        <div class="slide">
          <img src="img/14.jpg" alt="" />
        </div>
        <div class="slide">
          <img src="img/89.jpg" alt="" />
        </div>
      </div>
    </div>

    <!-- ------------------------------------------------- -->
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入在线axios地址 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./js/vue.js"></script>
  </body>
</html>
